import React from 'react';
import styles from './index.less';
import { CloseOutlined } from '@ant-design/icons';
import { Row, Col, Table } from 'antd';

export default class extends React.Component {
  render() {
    const columns = [
      { title: '任务项', dataIndex: 'task', key: 'task',className:'szy' },
      { title: '当前进度', dataIndex: 'proState', key: 'proState',className:'szy' },
      { title: '任务完成情况', dataIndex: 'workData', key: 'workData',className:'szy' },
      { title: '待完成任务', dataIndex: 'awaitWork', key: 'awaitWork',className:'szy' },
    ];
    const data = [
      {
        key: '1',
        task: '1. 安全隐患点排查',
        proState: '90%',
        workData: '排查2000个安全隐患点',
        awaitWork: '排查任务点剩余2000个',
      },
      {
        key: '2',
        task: '2. 安置点排查',
        proState: '90%',
        workData: '排查2000个安全隐患点',
        awaitWork: '排查任务点剩余2000个',
      },
      {
        key: '3',
        task: '3. 人员转移',
        proState: '90%',
        workData: '排查2000个安全隐患点',
        awaitWork: '已完成',
      },
      {
        key: '4',
        task: '4. 灾情播报',
        proState: '90%',
        workData: '排查2000个安全隐患点',
        awaitWork: '未来继续播报',
      },
      {
        key: '5',
        task: '5. 在岗履职排查',
        proState: '90%',
        workData: '排查2000个安全隐患点',
        awaitWork: '已完成',
      },
      {
        key: '6',
        task: '整体进度',
        proState: '90%',
        workData: '',
        awaitWork: '',
      },
    ];

    const detail = [{
      title: '任务名称：',
      cont: '防台防汛',
      title2: '任务来源：',
      cont2: '省级下发'
    }, {
      title: '任务接受：',
      cont: '应急管理局',
      title2: '任务要求周期：',
      cont2: '2个月'
    }, {
      title: '协同部门：',
      cont: '城管、消防、规自',
      title2: '任务截止时间：',
      cont2: '2021-12-10'
    }
    ]
    return (
      <div className={styles.container}>
        <div className={styles.header}>
          <div className={styles.title}>任务详情</div>
          <div className={styles.close}> <CloseOutlined /></div>
        </div>

        <div className={styles.content}>
          {
            detail.map((item, i) => {
              return (<Row>
                <Col span={12}>
                  <div className={styles.item}>
                    <span className={styles.itemTitle}>{item.title}</span>
                    <span className={styles.itemCont}>{item.cont}</span>
                  </div>
                </Col>
                <Col span={12}>
                  <div className={styles.item}>
                    <span className={styles.itemTitle}>{item.title2}</span>
                    <span className={styles.itemCont}>{item.cont2}</span>
                  </div>
                </Col>
              </Row>)

            })
          }
        </div>
        <div className={styles.table}>
          <Table 
          columns={columns} 
          dataSource={data} 
          rowClassName={styles.tableItem}
          pagination={false}
          ></Table>
        </div>
      </div>
    );
  }
}
